@import "reset.scss";
@import "base.scss";
@import "mixin.scss";

//common CSS
html,body {
    width: 100%;
    height: 100%;
    min-width: 100 * $fontSize12;
    background: $backgroundColor;
}
.SY-content {
    padding-top: 6 * $fontSize10;
    min-height: 29 * $fontSize16;
    @include backface;
}

//Header
.SY-header {
	top: 0;
	left: 0;
	width: 100%;
	min-width: $fontSize12 * 100;
	height: $fontSize12 * 5;
	line-height: $fontSize12 * 5;
	background: $color333;
    @include boxShadow(0 0 15px rgba(27,28,31,.5));
	z-index: 1000;
    > .clearfix {
        padding: 0 $fontSize10 * 4;
    }
    .SY-logo {
        margin-top: $fontSize18 / 2;
        img {
            width: 46px;
            height: 29px;
        }
        .slogin {
            display: inline-block;
            font-size: $fontSize22;
            line-height: $fontSize12 * 2;
            color: $colorfff;
            vertical-align: top;
            margin: $fontSize16 / 2 0 0 $fontSize12 / 2;
        }
    }
    .SY-topRight {
        font-size: $fontSize20;
        .line {
            &:after {
                display: inline-block;
                position: relative;
                top: $fontSize10 / 2;
                width: 0;
                height: $fontSize18;
                margin:0;
                content: '';
                border-right: 1px solid #969798;
            }
        }
        > ul > li {
            padding:0 $fontSize10;
            height: $fontSize10 * 6;
            line-height: $fontSize10 * 6;
            font-size: $fontSize14;
        }
        li {
            &.active > a {
                color: $theme !important;
            }
        }
        a {
            display: inline-block;
            height: 100%;
            font-size: 15px;
            @include link-colors(#eee,$theme !important);
            i {
                display: inline-block;
                width: $fontSize22;
                height: $fontSize22;
                margin:$fontSize20 $fontSize10 / 2 0 0;
                vertical-align: top;
                background-image: url("../img/icons/headerNav.png");
                background-repeat: no-repeat;
            }
        }
        .SY-index {
            &.active {
                i {
                    background-position: 0 0;
                }
            }
            i {
                background-position:0 -25px;
            }
            a {
                &:hover {
                    i {
                        background-position: 0 0;
                    }
                }
            }
        }
        .SY-CG {
            &.active {
                i {
                    background-position: -105px -1px;
                }
            }
            i {
                background-position: -105px -25px;
            }
            a {
                &:hover {
                    i {
                        background-position: -105px -1px;
                    }
                }
            }
        }
        .SY-piazza {
            &.active {
                i {
                    background-position: -23px 0;
                }
            }
            i {
                background-position: -22px -25px;
            }
            a {
                &:hover {
                    i {
                        background-position: -23px 0;
                    }
                }
            }
        }
        .SY-focus {
            &.active {
                i {
                    background-position: -129px 0;
                }
            }
            i {
                background-position: -129px -25px;
            }
            a {
                &:hover {
                    i {
                        background-position: -129px 0;
                    }
                }
            }
        }
        .SY-exit {
            &.active {
                i {
                    background-position: -84px 1px;
                }
            }
            i {
                background-position: -84px -24px;
            }
            a {
                &:hover {
                    i {
                        background-position: -84px 1px;
                    }
                }
            }
        }
        .SY-notify {
            &:hover {
                .fold {
                    display: block;
                }
            }
            &.active {
                i {
                    background-position: -152px 1px;
                }
            }
            i {
                background-position: -152px -24px;
            }
            a {
                &:hover {
                    i {
                        background-position: -152px 1px;
                    }
                }
            }
            > a {
                .num {
                    top: $fontSize16;
                    left: 23px;
                    height: 15px;
                    line-height: 13px;
                    text-align: center;
                    font-size: $fontSize12;
                    color: $colorfff;
                    padding:0 $fontSize12 / 3;
                    @include borderRadius(20px);
                    background: #ff2020;
                }
            }
            .fold {
                display: none;
                right : -35px;
                top: $fontSize10 * 6;
                width: 287px;
                max-height: 292px;
                @include borderRadius(0 0 5px 5px);
                @include boxShadow(0 0 $fontSize12 *2 rgba(0,0,0,.4));
                background: $color444;
                li {
                    line-height: $lineHeight;
                    border-bottom: 1px solid #4f4f4f;
                    &:last-child {
                        border-bottom: none;
                    }
                    a {
                        margin:0 $fontSize10;
                        padding: $fontSize16 / 2 $fontSize10;
                        font-size: $fontSize14;
                        color: #a0a0a0;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        word-wrap: break-word;
                        word-break: break-all;
                        &:hover {
                            color: $colorfff !important;
                        }
                    }
                }
                .checkAll {
                    height: 37px;
                    line-height: 37px;
                    @include borderRadius(0 0 5px 5px);
                    background: #3b3b3b;
                    a {
                        width: 100%;
                        color: #d7d7d7;
                        &:hover {
                            color: $colorfff !important;
                        }
                    }
                }
                .emptyInfo {
                    font-size: $fontSize14;
                    color: #a0a0a0;
                    padding: $fontSize10 * 4 0;
                }
                .trigon {
                    left: 215px;
                    top: -($fontSize16 / 2);
                    width: 0;
                    height: 0;
                    border-left: $fontSize10 solid transparent;
                    border-right: $fontSize10 solid transparent;
                    border-bottom: $fontSize10 solid $color444;
                }
            }
            .topBox {
                padding : $fontSize14 $fontSize10 13px;
                height: $fontSize20;
                line-height: $fontSize20;
                border-bottom: 1px solid $color666;
                .text {
                    font-size: $fontSize14;
                    color: $colorfff;
                }
                .emptyBtn {
                    font-size: $fontSize12;
                    color: #cdcccc;
                }
            }
        }
        .SY-userPic {
            &:hover {
                .fold {
                    display: block;
                }
                a {
                    border-color: #9c9c9c;
                }
            }
            > a {
                width: $fontSize10 * 3;
                height: $fontSize10 * 3;
                margin-top: $fontSize14;
                @include borderRadius(50%);
                @include border(2px,solid,$color333);
                overflow: hidden;
            }
            img {
                vertical-align: top;
                width: 100%;
                height: 100%;
            }
            .fold {
                display: none;
                top: $fontSize10 * 6;
                right: -($fontSize20);
                width: 105px;
                @include borderRadius(0 0 5px 5px);
                @include boxShadow(0 0 $fontSize12 * 2 rgba(0,0,0,.4));
                background: $color444;
                z-index: 9;
                li {
                    height: 39px;
                    line-height: 39px;
                }
                a {
                    width: 100%;
                }
                .trigon {
                    left: 50%;
                    top: -($fontSize16 / 2);
                    margin-left: -($fontSize14 / 2);
                    width: 0;
                    height: 0;
                    border-left: $fontSize10 solid transparent;
                    border-right: $fontSize10 solid transparent;
                    border-bottom: $fontSize10 solid $color444;
                }
                .SY-exit {
                    height: 43px;
                    line-height: 43px;
                    border-top: 1px solid #888;
                    i {
                        margin-top: $fontSize10;
                    }
                }
            }
        }
        .SY-regLog {
            font-size: $fontSize14;
            padding : 0 ($fontSize10 * 3) / 2;
            a {
                &:first-child {
                    margin-right: $fontSize10;
                }
            }
        }
        .SY-create {
            width: 3.25 * $fontSize16 !important;
            height: 5.5 * $fontSize12 !important;
            text-align: center;
            margin-left: $fontSize16 / 2;
            a {
                width: 100%;
                background: url("../img/icons/headerCreate.png");
                background-repeat: no-repeat;
                background-position: 0 0;
                &:hover {
                    color: $colorfff !important;
                    background-position: -53px 0;
                }
            }
        }
    }
    .SY-search {
        top : $fontSize10;
        left: 50%;
        width: 554px;
        @include transform(translateX(-50%));
        @media screen and(max-width: 145 * $fontSize10) {
            width: 48 * $fontSize10;
        }
        @media screen and(max-width: 135 * $fontSize10) {
            width: 40 * $fontSize10;
        }
        @media screen and(max-width: 130 * $fontSize10) {
            width: 34 * $fontSize10;
        }
        .inputField {
            height: 4 * $fontSize10;
            @include border(1px,solid,#505050);
            @include borderRadius(2px);
            overflow: hidden;
            background: #3e3e3e;
            &.active {
                border-color: #7b7b7b;
                background: #4d4d4d;
            }
        }
        .SY-input {
            width: 100%;
            height: 100%;
            display: block;
            border:none;
            outline: none;
            font-size: $fontSize14;
            color: $colorfff;
            background: rgba(62,62,62,0);
            &::placeholder {
                color: #b1b1b1;
            }
        }
        .search-icon {
            font-size: $fontSize18;
            line-height: $fontSize18;
            right: 3 * $fontSize10;
            top: 11px;
            @include link-colors($colorab,$colorfff);
        }
        .searchTips {
            top: 5 * $fontSize10;
            left: 0;
            width: 100%;
            max-height: 26 * $fontSize14;
            line-height: $lineHeight;
            @include borderRadius(3px);
            background: rgba(51,51,51,.6);
            z-index: 99999;
            .searchReferral {
                padding: $fontSize20 $fontSize16 ($fontSize20 * 2.5) / 2;
                ul {
                    padding-left: $fontSize14;
                }
                .worker {
                    margin-bottom: $fontSize12 / 2;
                    a {
                        font-size: 13px;
                        color: $colorfff;
                        margin:0 $fontSize10;
                    }
                }
            }
            .searchResult {
                padding:$fontSize12 3 * $fontSize10 $fontSize14;
                .worker {
                    margin-bottom: $fontSize12;
                    a{
                        font-size: ($fontSize10 * 3) / 2;
                        color: $colorfff;
                    }
                }
                .checkMore {
                    border-top: 1px solid #d8d8d8;
                    margin:$fontSize18 (-$fontSize12) 0;
                    padding-top: $fontSize12 / 3;
                    a {
                        font-size: $fontSize14;
                        @include link-colors(#d8d8d8,$colorfff);
                        i {
                            font-size: $fontSize16;
                            margin-left: $fontSize12 / 4;
                        }
                    }
                }
            }
            .searchRecent {
                margin-bottom: $fontSize10;
            }
            .title {
                font-size: ($fontSize10 * 3) / 2;
                color: $colorfff;
                margin-bottom: $fontSize16 / 2;
            }
        }
        .emptyInfo{
            .tips {
                font-size: $fontSize14;
                color: $colorea;
                margin:6 * $fontSize10 0 7 * $fontSize10;
                a {
                    margin:0 $fontSize12 / 4;
                    @include link-colors($theme,$darkTheme);
                    text-decoration: underline;
                }
            }
        }
    }
}

//Footer
.SY-footer {
    min-width: 100 * $fontSize12;
    .SY-foot {
        padding:0 12 * $fontSize10 0;
        height: 20 * $fontSize10;
        font-weight: 200;
        background-color: $color333;
        .aboutUs {
            margin-top: 4 * $fontSize14;
        }
        .logoBox {
            margin-bottom: 3 * $fontSize10;
            img {
                width: 4 * $fontSize12;
                height: 3 * $fontSize10;
                margin: -($fontSize10) $fontSize10 / 2 0 0;
                vertical-align: middle;
            }
            .slogin {
                font-size: 2 * $fontSize12;
                color: $colorfff;
            }
            .line {
                width: 1px;
                height: ($fontSize10 * 5) / 2;
                margin:0 $fontSize16;
                vertical-align: top;
                background: $colorea;
            }
            .text {
                font-size: $fontSize16;
                color: #fffefe;
                margin-top: $fontSize10 / 2;
                vertical-align: top;
            }
        }
        .msgDetail {
            margin-top: 6 * $fontSize10;
            dl {
                width: 7 * $fontSize10;
                margin:0 3 * $fontSize10 $fontSize20 0;
                text-align: left;
                &:first-child {
                    margin-right: 0;
                }
            }
            dt a {
                font-size: $fontSize16;
                line-height: $lineHeight;
                @include link-colors(#ddd,$colorfff);
            }
            .recordNumber {
                font-size: $fontSize16;
                line-height: $lineHeight;
                margin-top: 5 * $fontSize10;
                a {
                    color: $colorfff;
                }
            }
        }
        .connectUs {
            p {
                font-size: $fontSize16;
                color: $colorfff;
                margin-left: $fontSize10;
                line-height: 1.2;
                vertical-align: top;
            }
            .phoneNumer {
                font-size: $fontSize22;
                color: $colorfff;
                margin: -($fontSize12 / 4) 0 0 $fontSize10 / 2;
                vertical-align: top
            }
            .tencent {
                margin:-($fontSize12 / 2) 0 0 5 * $fontSize10;
                vertical-align: bottom;
            }
        }
        .linkIcon {
            display: inline-block;
            width: 1.7 * $fontSize20;
            height: 1.7 * $fontSize20;
            background-image: url("../img/icons/icon.png");
        }
        .iconList {
            margin-top: -($fontSize10 / 2);
            li {
                display: inline-block;
                margin: 0 0 0 $fontSize20;
                &:first-child {
                    margin-left: $fontSize10;
                }
            }
            .weChatCode {
                display: none;
                bottom: 5 * $fontSize10;
                right: -(8 * $fontSize10);
                width: 14 * $fontSize14;
                height: 25 * $fontSize10;
                background-color: $colorfff;
                color: $color666;
                font-size: $fontSize12;
                z-index: 999;
                @include borderRadius(3px);
                @include boxShadow(0 $fontSize12 / 3 $fontSize12 0 rgba(7,17,27,.1));
                i.icon-arrow-down {
                    display: inline-block;
                    width: 0;
                    height: 0;
                    bottom: -(2 * $fontSize14);
                    right: 8 * $fontSize10 + 1;
                    @include border(15px,solid,transparent);
                    border-top-color: $colorfff;
                }
                img {
                    width: 10 * $fontSize18;
                    height: 10 * $fontSize18;
                    margin-top: $fontSize10;
                }
                .scan {
                    margin: (3 * $fontSize10) / 2 0 $fontSize10;
                }
            }
            .pr{
                &:hover {
                    .weChatCode {
                        display: block;
                    }
                }
            }
        }
        span.wechat {
            @include link-backPos((0 0),(0 (-(2 * $fontSize18))));
        }
        a.sina {
            @include link-backPos((-(2 * $fontSize18) 0),(-(2 * $fontSize18) (-(2 * $fontSize18))));
        }
        a.tencent {
            @include link-backPos((-(4 * $fontSize18) 0),(-(4 * $fontSize18) (-(2 * $fontSize18))));
        }
    }
}

//page
.page {
    margin-top: (7 * $fontSize10) / 2;
    .pageList li {
        display: inline-block;
        margin-right: $fontSize14;
        &.pageActive {
            font-weight: 700;
            a {
                color: $color333;
            }
        }
        a {
            font-size: $fontSize14;
        }
        &.text {
            height: 26px;
            line-height: 26px;
            margin-right: $fontSize16;
            &.disable a {
                color: #bfbfbf !important;
                cursor: pointer;
            }
            &:hover a {
                color: $color333;
            }
            &:nth-child(2) {
                margin-right: 2 * $fontSize16;
            }
        }
        &:not(.text) a {
            display: inline-block;
            width: 26px;
            height: 26px;
            line-height: 26px;
            font-size: $fontSize16;
            text-align: center;
            &:hover {
                color: $color333;
            }
        }
    }
}

//uploadFiles
.main_attachment {
    width: 100%;
    height: 7 * $fontSize10;
    > div {
        vertical-align: top;
        margin:$fontSize16 / 2 $fontSize10;
        padding:$fontSize10 0 $fontSize10 ($fontSize10 * 3) / 2;
    }
    .upload {
        padding:17px 0;
        margin-left: $fontSize20;
        a {
            font-size: $fontSize14;
            color: $colorab;
            overflow: hidden;
            input {
                position: absolute;
                width: 10 * $fontSize10;
                height: 6 * $fontSize10;
                top: -(5 * $fontSize10) / 2;
                left: 0;
                @include opacity(0);
                font-size: 2.9 * $fontSize20;
                cursor: pointer;
            }
            i {
                font-size: $fontSize16;
                margin-top: $fontSize12 / 4;
            }
            span {
                color: #d83733;
            }
        }
    }
    .uploaded {
        width: 21 * $fontSize10;
        height: 34px;
        background: #f4f6f8;
        a {
            top : $fontSize12;
            right: $fontSize12;
            font-size: $fontSize14;
            @include link-colors(#b6b6b6,red);
        }
    }
    .fileMsg {
        .fileName {
            font-size: 13px;
            color: #909090;
            line-height: $lineHeight;
            max-width: 14 * $fontSize10;
            margin-bottom: $fontSize10 / 5;
        }
        .detail {
            font-size: $fontSize12;
            color: $colorab;
        }
        .tips {
            margin-left: $fontSize10 / 2;
            color: #76b678;
        }
    }
    .fileIcon {
        width: 2 * $fontSize16;
        height: 2 * $fontSize16;
        margin-right: $fontSize12 / 4;
        vertical-align: top;
        background-image: url("../img/editor/fileIcon.png");
        background-repeat: no-repeat;
        background-position: -(24 * $fontSize16) 0;
        &.xls,&.xlsx {
            background-position: -(2 * $fontSize16) 0;
        }
        &.doc,&.docx {
            background-position: -(4 * $fontSize16) 0;
        }
        &.ppt,&.pptx {
            background-position: -(6 * $fontSize16) 0;
        }
        &.zip {
            background-position: -(8 * $fontSize16) 0;
        }
        &.rar {
            background-position: -(10 * $fontSize16) 0;
        }
        &.uploadFile {
            background-position: -(12 * $fontSize16) 0;
        }
        &.cd {
            background-position: -(14 * $fontSize16) 0;
        }
        &.file {
            background-position: -(16 * $fontSize16) 0;
        }
        &.internet {
            background-position: -(18 * $fontSize16) 0;
        }
        &.js {
            background-position: -(20 * $fontSize16) 0;
        }
        &.css {
            background-position: -(22 * $fontSize16) 0;
        }
        &.pdf {
            background-position: -(32 * $fontSize16) 0;
        }
        &.psd {
            background-position: -(34 * $fontSize16) 0;
        }
        &.ai {
            background-position: -(36 * $fontSize16) 0;
        }
        &.fla {
            background-position: -(38 * $fontSize16) 0;
        }
        &.swf {
            background-position: -(40 * $fontSize16) 0;
        }
        &.txt {
            background-position: -(42 * $fontSize16) 0;
        }
        &.article {
            background-position: -(44 * $fontSize16) 0;
        }
        &.mp4,&.flv,&.avi,&.rmvb {
            background-position: -(54 * $fontSize16) 0;
        }
        &.mp3,&.ogg {
            background-position: -(56 * $fontSize16) 0;
        }
        &.folder {
            background-position: -(56 * $fontSize16) (-(2 * $fontSize16));
        }
        &.jpg,&.jpeg {
            background-position: 0 (-(2 * $fontSize16));
        }
        &.gif {
            background-position: (-(2 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.png {
            background-position: (-(4 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.bmp {
            background-position: (-(6 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.tif {
            background-position: (-(8 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.emf {
            background-position: (-(10 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.wmf {
            background-position: (-(12 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.ico {
            background-position: (-(14 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.raw {
            background-position: (-(16 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.ballon {
            background-position: (-(18 * $fontSize16)) (-(2 * $fontSize16));
        }
        &.setting {
            background-position: (-(20 * $fontSize16)) (-(2 * $fontSize16));
        }
    }
    .uploading {
        width: 27 * $fontSize10;
        height: 34px;
        background: #f4f6f8;
    }
    .uploadProgress {
        .progress {
            width: 8 * $fontSize10;
            height: $fontSize10;
            margin-right: $fontSize12 / 4;
            vertical-align: top;
            background: $colorfff;
        }
        .progressing {
            top: $fontSize10 / 10;
            left: $fontSize10 / 10;
            width: 0%;
            height: $fontSize16 / 2;
            background: #49cc6e;
        }
        .info {
            color: $colorab;
        }
    }
}

//settingBar
.SY-content {
    .SY-SettingBar {
        top: 0;
        left: 0;
        height: 100%;
        z-index: 9;
        .mainMenu {
            top: 6 * $fontSize10;
            left: 0;
            width: 8 * $fontSize10;
            height: 100%;
            background: $color333;
            li{
                &:hover {
                    background: #393939;
                }
                &.active{
                    background: #494949;
                }
            }
            a {
                display: block;
                width: 100%;
                padding-top: (3 * $fontSize10) / 2;
                height: 5 * $fontSize10 + 5;
                .home {
                    width: $fontSize20 + 1;
                    height: $fontSize18;
                    background-position: 0 0;
                }
                .post {
                    width: $fontSize18 + 1;
                    height: $fontSize18;
                    background-position: 0 (-($fontSize18 + 1));
                }
                .support {
                    width: $fontSize18;
                    height: $fontSize18;
                    background-position: 0 (-($fontSize18 * 2 + 1));
                }
                .wallet {
                    width: $fontSize20;
                    height: $fontSize16;
                    background-position: 0 (-($fontSize14 * 4 - 1));
                }
                .notification {
                    width: $fontSize20;
                    height: $fontSize20;
                    background-position: 0 (-($fontSize12 * 6));
                }
                .marketing {
                    width: $fontSize20;
                    height: $fontSize20;
                    background-position: 0 (-(11 * $fontSize10));
                }
                .invite {
                    width: $fontSize20;
                    height: $fontSize20 - 1;
                    background-position: 0 (-(5.75 * $fontSize16));
                }
                .setting {
                    width: $fontSize20;
                    height: $fontSize20;
                    background-position: 0 (-(13 * $fontSize10 + 1));
                }
            }
            .text {
                font-size: $fontSize14;
                margin-top: $fontSize16 / 2;
                color: $colorea;
            }
            .pic {
                margin:0 auto;
                background-image: url("../img/icons/settingBar.png");
                background-repeat: no-repeat;
            }
        }
        .secondMenu {
            display: none;
            top: 6 * $fontSize10;
            left: 8 * $fontSize10;
            width: 12 * $fontSize10;
            height: 100%;
            background: #494949;
            ul {
                margin-top: $fontSize20;
            }
            a {
                font-size: $fontSize14;
                padding:($fontSize20 + 1) 0 ($fontSize20 + 1) ($fontSize20 + 5);
                color: $colorea;
            }
            li.active {
                a {
                    font-weight: 700;
                    color: $theme;
                }
                &:hover {
                    background: $color444;
                }
            }
        }
    }
    &.spread {
        .SY-SettingBar .secondMenu {
            display: block;
        }
    }
}

//setting Common CSS
.SY-setContent {
    .SY-userCenter {
        margin: $fontSize20 0 $fontSize10;
        font-weight: 300;
        .br5 {
            background:$colorfff;
        }
        .SY-user {
            margin: 3.3 * $fontSize10 0 3.3 * $fontSize10 5.5 * $fontSize10;
        }
        .avatar {
            width: 13 * $fontSize10;
            height: 13 * $fontSize10;
            overflow: hidden;
            @include boxShadow(0 $fontSize12 / 3 $fontSize12 / 2 rgba(0,0,0,.19));
            img {
                width: 100%;
                height: 100%;
            }
        }
        .msg {
            vertical-align: top;
            margin:3 * $fontSize10 0 0 2 * $fontSize16;
            .nickName  {
                font-size: 2 * $fontSize12;
                color: $color111;
                line-height: $lineHeight;
                margin-bottom: $fontSize10 / 2;
                max-width:35 * $fontSize10;
            }
            .desc {
                font-size: $fontSize16;
                color: #939393;
                line-height: $lineHeight;
                max-width: 40 * $fontSize10;
            }
        }
        .SY-datas {
            margin:6.3 * $fontSize10 5.5 * $fontSize10 0 0;
            > div {
                width: 7.6 * $fontSize10;
                height: 6 * $fontSize12;
                margin-left: 2 * $fontSize16;
                color: #7f7f7f;
                background-image: url("http://img.yxs.shenyecg.com/Image/DV5FDrRctz5w2gv3yiMbjgJOSnGPJyA5/RMpzh5NANG.png");
                background-repeat: no-repeat;
            }
            .scan {
                background-position: 0 0;
            }
            .works {
                background-position: - 8.2 * $fontSize10 0;
            }
            .follow {
                background-position: - 16.3 * $fontSize10 0;
            }
            .thumbUp {
                background-position: - 24.6 * $fontSize10 0;
            }
            .comment {
                background-position: - 33.1 * $fontSize10 0;
            }
            .text {
                font-size: $fontSize14;
            }
            p:first-child {
                font-size: $fontSize12;
                margin: $fontSize18 0 $fontSize10 / 2;
            }
            .num {
                font-size: $fontSize16;
                font-weight: 700;
                color: $color333;
                margin-right: $fontSize10 / 5;
            }
        }
    }
    .SY-setting {
        margin-bottom: 10 * $fontSize10;
        .SY-enter {
            width: 23.2 * $fontSize10;
            font-weight: 300;
            > div {
                margin-bottom: $fontSize10;
                overflow: hidden;
                background: $colorfff;
            }
        }
        .SY-create {
            padding: $fontSize10 + 1 0;
            .createBtn {
                width: 18 * $fontSize10;
                height: 4 * $fontSize10;
                line-height: 4 * $fontSize10;
                margin: 0 auto;
                font-size: $fontSize16;
                font-weight: 500;
                color: $color111;
                @include borderRadius($fontSize10);
                @include link-posColor(#f4f4f4,#ebebeb);
                .icon {
                    width: $fontSize20;
                    height: $fontSize20;
                    vertical-align: top;
                    margin: $fontSize10 $fontSize10 0 0;
                    background: url("http://img.yxs.shenyecg.com/Image/xbniJCCbMQ6c9Yo5uFPmrNf6wdLbJx0j/xix5TWZeRs.png") no-repeat center;
                }
            }
        }
        .SY-tabNav {
            li {
                height: 6 * $fontSize10;
                line-height: 6 * $fontSize10;
                font-size: $fontSize18;
                &.active a {
                    color: $theme;
                    border-color: $theme;
                    background: #f8f8f8;
                }
            }
            a {
                color: $color333;
                border-left: $fontSize10 / 2 solid $colorfff;
                .icon {
                    display: inline-block;
                    width: $fontSize18 + 1;
                    height: $fontSize18;
                    vertical-align: top;
                    margin: $fontSize20 + 1 $fontSize20 0 0;
                    background-image:url("http://img.yxs.shenyecg.com/Image/KHMUkCY1BDFT6lEiDk0grwfCG8OI1wEV/QThtccWabZ.png");
                    background-repeat: no-repeat;
                }
            }
            .private {
                .icon {
                    background-position: 0 0;
                }
                &.active {
                    .icon {
                        margin-top: $fontSize20;
                        background-position: 0 (- $fontSize18);
                    }
                }
            }
            .workControl {
                .icon {
                    background-position: - 2.3 * $fontSize10 0;
                }
                &.active {
                    .icon {
                        margin-top: $fontSize20;
                        background-position: - 2.3 * $fontSize10 (- $fontSize18);
                    }
                }
            }
            .subscript {
                .icon {
                    background-position: - 8.8 * $fontSize10 0;
                }
                &.active {
                    .icon {
                        background-position: - 8.8 * $fontSize10 (- ($fontSize18 + 1));
                    }
                }
            }
            .collection {
                .icon {
                    margin-top: $fontSize20;
                    background-position: - 6.8 * $fontSize10 0;
                }
                &.active {
                    .icon {
                        background-position: - 6.8 * $fontSize10 (- ($fontSize18 + 1));
                    }
                }
            }
            .wallet {
                .icon {
                    background-position: - 4.6 * $fontSize10 0;
                }
                &.active {
                    .icon {
                        background-position: - 4.6 * $fontSize10 (- ($fontSize18 + 1));
                    }
                }
            }
            .account {
                .icon {
                    background-position: - 10.9 * $fontSize10 0;
                }
                &.active {
                    .icon {
                        background-position: - 10.9 * $fontSize10 (- ($fontSize18 + 1));
                    }
                }
            }
        }
    }
}

//publish -> tags
.SY-setContent .bottomContent {
    .content {
        > div{
            border-bottom: 1px solid $colore5;
        }
        .inputBox {
            padding:($fontSize12 + 1) ($fontSize20 * 2 - 2);
            .themeIcon {
                width: $fontSize16;
                height: $fontSize16;
                margin-right: $fontSize16 / 2;
                vertical-align: top;
                background: url("../img/editor/theme.png") no-repeat center center;
            }
            .tagsIcon {
                font-size: $fontSize16;
                vertical-align: top;
                margin-right: $fontSize16 / 2;
                color: $colorab;
            }
            .iunptTheme {
                width: 61 * $fontSize10;
                height: 100%;
                display: flex;;
                flex-direction: row;;
                align-items: center;
            }
            .iunptTag {
                @extend .iunptTheme;
            }
            .wordTags {
                display: flex;
                flex-wrap: nowrap;
            }
            .tag-checked-name {
                display: inline-block;
                position: relative;
                height: $fontSize20;
                line-height: $fontSize20;
                font-size: $fontSize12;
                color: $color666;
                padding:0 $fontSize20 0 $fontSize16 / 2;
                margin:0 $fontSize10 /2 $fontSize16 / 2 0;
                @include borderRadius(5px);
                @include border(1px,solid,$colore5);
                background-color: #edeff0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:first-child {
                    margin-left: 0;
                }
                em {
                    display: block;
                    position: absolute;
                    top: $fontSize10 / 2;
                    right: $fontSize10 / 5;
                    width: $fontSize12;
                    height: $fontSize12;
                    cursor: pointer;
                    @include transform(rotate(45deg));
                    &:before {
                        display: block;
                        position: absolute;
                        content : '';
                        top: 0;
                        left: $fontSize10 / 2;
                        width: $fontSize10 / 10;
                        height: $fontSize10 + 1;
                        background: #888;
                    }
                    &:after {
                        display: block;
                        position: absolute;
                        content : '';
                        top: $fontSize10 / 2;
                        width: $fontSize10 + 1;
                        height: $fontSize10 / 10;
                        background: #888;
                    }
                }
            }
            input {
                display: inline-block;
                width: 44 * $fontSize10;
                font-size: $fontSize12 + 1;
                background: $colorfff;
                border:none;
                outline: none;
                margin-bottom: $fontSize16 / 2;
                &::placeholder {
                    color: $colorab;
                }
            }
        }
        .themeBox {
            display: none;
            margin: $fontSize12 / 3 ($fontSize18 + 2) 0;
            padding-bottom: $fontSize16 / 2;
            border-top: 1px solid $colore5;
        }
        .tagBox {
            @extend .themeBox;
            max-height: $fontSize16 * 6;
            overflow-y: auto;
            overflow-x: hidden;
        }
        a.dib {
            height: $fontSize12 * 2;
            line-height: $fontSize12 * 2;
            padding:0 $fontSize20;
            margin: $fontSize16 / 2 $fontSize16 / 2 0 0 ;
            font-size: $fontSize12 + 1;
            background: #edeff0;
            @include borderRadius(20px);
            @include link-colors($color666,#d3d3d3);
        }
    }
}

//404 Not Found
.SY-content .notFound {
    width: 100%;
    min-height: 47.75 * $fontSize16;
    background-color: #f8fafc;
    img {
        width: 10.375 * $fontSize16;
        height: 27 * $fontSize10 - 3;
    }
    .fourZeroFour {
        font-size: $fontSize14;
        color: $color444;
        margin-top: 5 * $fontSize10;
    }
    .backToIndex {
        margin-top: $fontSize14 + 1;
        a {
            font-size: $fontSize14;
            color: $theme;
        }
    }
}

//backToTop
.backToTop {
    right: 0;
    top: 48 * $fontSize10;
    z-index: 999;
    a {
        width: 4 * $fontSize10;
        height: 4 * $fontSize10;
        line-height: 2 * $fontSize18;
        font-size: 2 * $fontSize12 + 2;
        color: $colorea;
        @include borderRadius(3px);
        background: rgba(0,0,0,.3);
        &:hover {
            background: rgba(0,0,0,.5);
        }
    }
}

//UserPage Common CSS
.SY-content {
    .SY-bannerBox {
        width:100%;
        height: 55 * $fontSize10;
        background-image: url("../img/personalCenter/personalPage.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        .cover {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 14.125 * $fontSize16;
            @include linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.65));
            z-index: 5;
        }
    }
    .SY-wrapper {
        min-height: 70 * $fontSize10;
        top: - 15 * $fontSize10;
        z-index: 5;
        > div {
            margin-bottom: $fontSize10;
        }
        .SY-userMsg {
            height: 15 * $fontSize10;
            @include borderRadius(5px 5px 0 0);
            background: $colorfff;
        }
        .navAnchor {
            top: - 17 * $fontSize10;
            left: 0;
        }
        .user-avatar {
            margin-left: 4 * $fontSize10;
            top: -(2 * $fontSize16);
            @include borderRadius(15px);
            @include boxShadow(0 0 $fontSize10 rgba(0,0,0,.2));
            img {
                width: 9.25 * $fontSize16;
                height: 9.25 * $fontSize16;
                @include border(4px,solid,$colorfff);
                @include borderRadius(15px);
                background-color: $colorccc;
            }
        }
        .user-msg {
            padding-left: 20.5 * $fontSize12;
            font-weight: 200;
        }
        .user-nickName {
            .nickName {
                font-size: 2 * $fontSize16;
                margin:($fontSize10 - 1) 0 0;
                line-height: $lineHeight;
                max-width: 40 * $fontSize10;
                a {
                    color: $color111;
                }
            }
            .rewrite {
                font-size: $fontSize20;
                margin:3 * $fontSize10 0 0 (3 * $fontSize10) / 2;
                vertical-align: top;
                @include link-colors($colorab,$color666);
            }
        }
        .user-defined {
            .user-career {
                font-size: $fontSize18;
                line-height: $lineHeight;
                color: $color666;
                margin-right: $fontSize12;
            }
            .user-scocialAccount {
                vertical-align: top;
                margin-left: $fontSize12 / 3;
                a {
                    width: $fontSize20;
                    height: $fontSize20;
                    text-align: center;;
                    line-height: $fontSize20 - 1;
                    font-size: $fontSize12;
                    color: $colorfff;
                    margin-right: $fontSize16 / 2;
                    background: $colorab;
                    &:hover {
                        background: #888;
                    }
                }
            }
        }
        .user-describe {
            font-size: $fontSize20;
            color: $color666;
            line-height: $lineHeight;
            max-width: 50 * $fontSize10;
            margin-top: $fontSize14 / 2;
        }
        .user-infos {
            margin:$fontSize20 2 * $fontSize20 0 0;
        }
        .user-datas {
            .num {
                font-size: $fontSize22;
                line-height: $lineHeight;
                color: $color333;
            }
            .text {
                font-size: $fontSize16;
                margin-top: $fontSize12 / 6;
                color: $colorab;
            }
            .line{
                &:after {
                    display: inline-block;
                    position: relative;
                    top: -($fontSize12 / 4);
                    width: 0;
                    height: 2 * $fontSize18 - 2;
                    margin:0 ($fontSize20 + 5);
                    content: '';
                    border-right: 1px solid $colorccc;
                }
            }
        }
        .user-btns {
            margin-top: $fontSize14;
            a {
                margin-left: $fontSize10;
                color: $colorfff;
                height: 2 * $fontSize16;
                line-height: 2 * $fontSize16;
                vertical-align: top;
                @include border(1px,solid,$colorfff);
                background: #0b9ff6;
                &:hover {
                    background: #0597ef;
                }
            }
            .sendMsg-btn {
                width: 4 * $fontSize10 + 2;
                font-size: $fontSize18;
                .num {
                    top: -($fontSize12 / 2);
                    right: -($fontSize12 / 2);
                    padding:0 $fontSize12 / 3;
                    height: $fontSize14 + 1;
                    line-height: $fontSize14 + 1;
                    text-align: center;
                    font-size: $fontSize12;
                    color: $colorfff;
                    @include borderRadius(20px);
                    background: red;
                }
            }
            .follow-btn {
                width: 5.75 * $fontSize16;
                font-size: $fontSize14 + 1;
                &.active {
                    border-color: $colorccc;
                    color: $colorab;
                    background: $colorfff;
                }
                i {
                    font-size: $fontSize14;
                    margin-right: $fontSize16 / 2;
                }
            }
        }
    }
}
